import React from "react";
import reduxStyle from "./redux.module.css"
import LeftMenu from "../../components/leftMenu";
import MainContent from "../../components/mainContent";
import Affix from "../../components/affix";
import {addTaskExerciseItem, delTaskExerciseItem, setTaskExerciseList} from "../../actions";
import {connect} from "react-redux";

function ReduxDemo(props) {
    const { taskExerciseList } = props;

    function changeNotify() {

    }

    return (<div className={reduxStyle.mainContainer}>
        <div className={reduxStyle.leftSection}>
            <LeftMenu/>
        </div>
        <div className={reduxStyle.rightSection}>
            <MainContent changeNotify={changeNotify}/>
        </div>
        <Affix taskExerciseList={taskExerciseList} changeNotify={changeNotify}/>
    </div>)
}

function mapStateToProps(state) {
    return {
        taskExerciseList: state.exercise
    }
}

function mapDispatchToProps(dispatch) {
    return {
        setTaskExerciseList: (list) => dispatch(setTaskExerciseList(list)),
        addTaskExerciseItem: item => dispatch(addTaskExerciseItem(item)),
        delTaskExerciseItem: id => dispatch(delTaskExerciseItem(id))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(ReduxDemo);
